<template>
    <div class="footer">
        <div class="footer-top">
        </div>
        <div class="footer-bottom">
            <div class="footer-box">
                <div class="Bfooter-nav">
                    <div class="navlist" v-for="(item,index) in navList" :key="index">{{ item.name }}</div>
                </div>
                <div class="Bfooter-content">
                    <h2>友情链接：</h2>
                    <div class="list">
                        <div v-for="(item,index) in list" :key="index+'0'">{{ item.name }}</div>
                    </div>
                    <div class="ma">
                        <img src="../../assets/ma.jpg" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                navList: [{
                    name: "关于我们"
                },{
                    name: "新手入门"
                },{
                    name: "新闻中心"
                },{
                    name: "常见问题"
                },{
                    name: "友情链接"
                }],
                list: [{
                    name: "娱采网"
                },{
                    name: "粉丝网"
                },{
                    name: "TOM时尚"
                },{
                    name: "大众网娱乐"
                },{
                    name: "中青网娱乐"
                },{
                    name: "大河网娱乐"
                },{
                    name: "亚洲明星网"
                },{
                    name: "中国模特网"
                },{
                    name: "中国艺人网"
                },{
                    name: "中国娱乐网"
                },{
                    name: "女人街"
                },{
                    name: "更多"
                }]
            }
        }
    }
</script>
<style scoped>
    /* 二维码 */
    .ma {
        position: absolute;
        top: 0px;
        left: 120%;
        width: 100px;
        height: 100px;
    }
    .ma img {
        width: 100%;
        border-radius: 4px;
    }
    .Bfooter-content {
        width: 50%;
        margin: 0 auto;
        position: relative;
    }
    .Bfooter-content h2 {
        margin: 20px 0px;
    }
    .list {
        overflow: hidden;
        margin-bottom: 40px;
    }
    .list div {
        width: 18%;
        text-align: center;
        margin-right: 2%;
        float: left;
        margin-bottom: 10px;
    }
    .Bfooter-nav{
        width: 60%;
        margin: 0 auto;
        overflow: hidden;
        color: #575756;
    }
    .navlist {
        float: left;
        padding: 0px 4%;
    }
    .footer {
        margin-top: 80px;
    }
    .footer-top {
        width: 100%;
        height: 86px;
        background: #000;
    }
    .footer-bottom {
        margin-top: 20px;
    }
    .footer-box {
        width: 1000px;
        margin: 0 auto;
    }
</style>